<!Doctype html>
<html>
    <head>
        <title>人民网舆论监控中心</title>
        <link rel="stylesheet" href="../stylesheets/material.min.css">
        <link rel="stylesheet" href="../stylesheets/visualize.css">
    </head>
    <body>
        <div class="central">
            <div class="visualization-div">
                <div class="visualization-1-card mdl-card mdl-shadow--2dp">
                    <canvas id="canvas" width="256px" height="256px"></canvas>
                </div>
            </div>
            <div class="request-moment">
                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="moment">
                        <label class="mdl-textfield__label" for="moment">输入你想知道的毫秒数</label>
                        <span class="mdl-textfield__error">你输入的不是数！</span>
                    </div>
                </form>
                <p>&nbsp</p>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="drawMoment()">
                    描图
                </button>
            </div>
            <div class="three">
                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="start">
                        <label class="mdl-textfield__label" for="moment">输入你想知道开始点的毫秒数</label>
                        <span class="mdl-textfield__error">你输入的不是数！</span>
                    </div>
                </form><p>&nbsp</p>
                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="stop">
                        <label class="mdl-textfield__label" for="moment">输入你想知道结束点的毫秒数</label>
                        <span class="mdl-textfield__error">你输入的不是数！</span>
                    </div>
                </form>
                <p>&nbsp</p>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="drawPeriod()">
                    描图
                </button>
            </div>
            <div class="four">
                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="velocity_id">
                        <label class="mdl-textfield__label" for="moment">输入你想知道轨迹速度的轨迹标号</label>
                        <span class="mdl-textfield__error">你输入的不是数！</span>
                    </div>
                </form>
                <p>&nbsp</p>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="drawVelocity()">
                    描图
                </button>
            </div>
            <div class="four">
                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="trace_id">
                        <label class="mdl-textfield__label" for="moment">输入你想知道轨迹图形的轨迹标号</label>
                        <span class="mdl-textfield__error">你输入的不是数！</span>
                    </div>
                </form>
                <p>&nbsp</p>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="drawTrace()">
                    描图
                </button>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="switchTrace('backward')">
                    上一个
                </button>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="switchTrace('forward')">
                    下一个
                </button>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="isHuman(1)">
                    是人
                </button>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" onclick="isHuman(0)">
                    不是人
                </button>
            </div>
            <div id="velocity"></div>
        </div>
        
        <script src="../javascripts/jquery-2.1.4.js"></script>
        <script src="../javascripts/material.min.js"></script>
        <script src="../javascripts/plotly.js"></script>
        <script src="../javascripts/visualize.js"></script>
    </body>
</html>